<template>
  <div>
    <el-form style="margin-top:20px;width:600px;" :model="register_data" 
      :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item v-if="isEdit == false" label="名字" prop="name">
        <el-input v-model="register_data.name"></el-input>
      </el-form-item>
      <el-form-item label="登录邮箱" prop="email">
        <el-input v-model="register_data.email" :disabled="isEdit"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="register_data.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="password_confirmation">
        <el-input v-model="register_data.password_confirmation"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-if="isEdit" @click="submitForm('ruleForm')">确认修改</el-button>
        <el-button type="primary" v-if="!isEdit" @click="submitForm('ruleForm')">立即添加</el-button>
        <el-button @click="navTop" v-if="!isEdit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import bus from '../../../bus.js'
export default {
  name: 'register',
  data () {
    return {
      isEdit: false,
      register_data: {
        id: '',
        name: '',
        email: '',
        password: '',
        password_confirmation: ''
      },
      rules: {
        name: [{ required: true, message: '内容不得为空' }],
        email: [
          { required: true,
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入邮箱'))
              } else {
                let emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if (
                  emailReg.test(value)
                ) {
                  callback()
                } else {
                  callback(new Error('用户名至少6位,由大小写字母和数字,-,_或邮箱组成'))
                }
              }
            },
            trigger: 'blur'
          }
        ],
        password: [
          { required: true,
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'))
              } else {
                if (!/^[a-zA-Z0-9_-]{6,16}$/.test(value)) {
                  callback(new Error('密码至少6位,由大小写字母和数字,-,_组成'))
                } else {
                  if (this.register === true) {
                    if (this.data.repassword !== '') {
                      this.$refs.data.validateField('repassword')
                    }
                  }
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        password_confirmation: [
          { required: true,
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'))
              } else {
                if (!/^[a-zA-Z0-9_-]{6,16}$/.test(value)) {
                  callback(new Error('密码至少6位,由大小写字母和数字,-,_组成'))
                } else {
                  if (this.register === true) {
                    if (this.data.repassword !== '') {
                      this.$refs.data.validateField('repassword')
                    }
                  }
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            id: this.register_data.id,
            name: this.register_data.name,
            email: this.register_data.email,
            password: this.register_data.password,
            password_confirmation: this.register_data.password_confirmation
          }
          if (params.password !== params.password_confirmation) {
            alert('两次输入的密码不一致')
            return
          }
          if (this.isEdit) {
            APP.ajax('post@user/reset', params, res => {
              if (res.data.status === 200) {
                this.$message.success('编辑成功');
                this.$router.push('/user/list');
              }
            })
          } else {
            delete params.id
            APP.ajax('post@user/add', params, res => {
              if (res.data.status === 200) {
                this.$message.success('添加成功!');
                this.resetForm('ruleForm')
              } else {
                alert(res.data.msg)
              }
            })
          }
        } else {
          return false
        }
      })
    },
    navTop() {
      bus.$emit('ViewShow', '取消');
    }
  },
  mounted () {
    if (this.$route.params.id) {
      this.isEdit = true
      APP.ajax('user/list/' + this.$route.params.id, {}, res => {
        this.register_data = res.data.data
      })
    }
  }
}
</script>
